<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/1.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .scroll {
            margin: 100px;
            width: 500px;
            height: 5px;
            background: #ccc;
            position: relative;
        }

        .bar {
            width: 10px;
            height: 20px;
            background: #369;
            position: absolute;
            top: -7px;
            left: 0;
            cursor: pointer;
        }

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            background: #369;
            width: 0;
            height: 5px;
        }
    </style>
</head>
<body>
<div class="scroll" id="scrollr">
    <div class="bar" id="barr">

    </div>
    <div class="mask" id="maskr"></div>
</div>
<p></p>
<header class="dc-header dc-header-fixed">
    <div class="dc-title">
        <div class="dc-black">
            <span class="dc-go-back"><</span>返回
        </div>
        <h1 class="dc-center-title">营养订餐</h1>
    </div>
    <div class="dc-header-box" style="background: url('images/dc-1-1.png');background-size: cover">
        <div class="dc-shop-title">
            <h2 class="dc-header-shopName">想要每餐都吃得健康?</h2>
            <div class="dc-header-delivery">
                <span class="dc-sub-title-one">请花1分钟回答几个小问题吧</span><br/><span
                    class="dc-sub-title-two">(仅适合正常非孕期健康成年人)</span>
            </div>
        </div>
        <div class="dc-header-right">
            <a href="#">跳过>></a>
        </div>
    </div>

</header>
<section class="dc-content">
    <div class="dc-1-content" style="margin-top: 0rem;">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">现在有减肥计划吗?</span>
            <span class="dc-content-title-right">有</span>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">每月的减肥大计是?</span>
            <span class="dc-content-title-right"><span class="red">3</span>&nbsp;kg/月</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <div class="gradient">

                </div>
                <div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>
            </div>

        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">性别</span>
            <span class="dc-content-title-right">男</span>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">年龄</span>
            <span class="dc-content-title-right"><span class="red">28</span>&nbsp;岁</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <div class="gradient">

                </div>
                <div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">体重</span>
            <span class="dc-content-title-right"><span class="red">28</span>&nbsp;kg</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <div class="gradient">

                </div>
                <div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">身高</span>
            <span class="dc-content-title-right"><span class="red">168</span>&nbsp;cm</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <div class="gradient">

                </div>
                <div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="dc-1-content">
        <div class="dc-1-box">
            <div class="dc-1-icon-box">
                <div class="dc-1-icon"></div>
            </div>
            <span class="dc-content-title">体力活动</span>
            <span class="dc-content-title-right"><span class="red">轻体力</span>&nbsp;活动</span>
        </div>
        <hr class="dc-1-box-line"/>
        <div class="dc-1-box">
            <div class="gradient-box">
                <!--<div class="gradient">

                </div>
                <div class="gradient-box-btn">
                    <div class="gradient-box-btn-inner"></div>
                </div>-->

            </div>
            <span class="dc-content-sub-title-note">PS:工作时经常走动</span>
        </div>
    </div>

    <div class="dc-1-content dc-1-bottom-btn">
        确定
    </div>
</section>
<script>
    var scroll = document.getElementById('scrollr');
    var bar = document.getElementById('barr');
    var mask = document.getElementById('maskr');
    var ptxt = document.getElementsByTagName('p')[0];
    var barleft = 0;
    bar.onmousedown = function(event){
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;
        var that = this;
        // 拖动一定写到 down 里面才可以
        document.onmousemove = function(event){
            var event = event || window.event;
            barleft = event.clientX - leftVal;
            if(barleft < 0)
                barleft = 0;
            else if(barleft > scroll.offsetWidth - bar.offsetWidth)
                barleft = scroll.offsetWidth - bar.offsetWidth;
            mask.style.width = barleft +'px' ;
            that.style.left = barleft + "px";
            ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";

            //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }

    }
    document.onmouseup = function(){
        document.onmousemove = null; //弹起鼠标不做任何操作
    }
</script>
</body>
</html>